<template>
	<view class="page-content">
		<view class="charts-box">
			<uni-section title="报警数量趋势" type="line">
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :canvas2d="true" canvasId="owLgatkcZsyayjqfTRlOtWkaKmJIirHQ" />
			</uni-section>
		</view>
		<view @tap="orderbyChange" :class="{ 'text-theme': hasChoose }">
			<span></span>
			筛选按钮
		</view>
		<fjj-condition ref="condition" @touchmove.stop :color="color" :list="menuList" :defaultValue="defaultValue" @result="resultConditon" />
	</view>
</template>

<script>
// import slFilter from '@/components/songlazy-sl-filter/sl-filter/sl-filter.vue'
// import slFilter from '@/components/sl-filter/sl-filter.vue';
import fjjCondition from '@/components/fjj-condition/fjj-condition.vue';
export default {
	data() {
		return {
			color: '#4D7BFE',
			hasChoose: false,
			menuList: [],
			defaultValue: {},
			chartData: {},
			//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			opts: {
				color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [15, 10, 0, 15],
				dataLabel: false,
				dataPointShape: false,
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					gridType: 'dash',
					dashLength: 2,
					data: [
						{
							min: 0,
							max: 150
						}
					]
				},
				extra: {
					line: {
						type: 'curve',
						width: 2,
						activeType: 'hollow',
						linearType: 'custom'
					}
				}
			}
		};
	},
	components: {
		fjjCondition
	},
	onLoad() {
		setTimeout(() => {
			this.menuList = [
				{
					title: '多选',
					type: 'custom',
					key: 'custom1',
					isMutiple: true, //多选
					detailList: [
						{
							title: '多选选项1',
							value: '1',
							isSelected: true
						},
						{
							title: '多选选项2',
							value: '2'
						},
						{
							title: '多选选项3',
							value: '3'
						},
						{
							title: '多选选项4',
							value: '4'
						},
						{
							title: '多选选项5',
							value: '5'
						},
						{
							title: '多选选项6',
							value: '6'
						}
					]
				},
				{
					title: '多选带更多',
					type: 'custom',
					key: 'custom3',
					isMutiple: true, //多选
					detailList: [
						{
							title: '多选选项1',
							value: '1'
						},
						{
							title: '多选选项2',
							value: '2'
						},
						{
							title: '多选选项3',
							value: '3'
						},
						{
							title: '多选选项4',
							value: '4'
						},
						{
							title: '多选选项5',
							value: '5'
						},
						{
							title: '多选选项6',
							value: '6'
						},
						{
							title: '多选选项7',
							value: '7'
						}
					]
				},
				{
					title: '单选',
					type: 'custom',
					key: 'custom2',
					isMutiple: false, //单选
					detailList: [
						{
							title: '选项1',
							value: '1'
						},
						{
							title: '选项2',
							value: '2'
						}
					]
				},
				{
					title: '日期范围',
					type: 'range',
					key: 'time1',
					minName: 'time1MinName',
					maxName: 'time1MaxName'
				},
				{
					title: '日期范围2',
					type: 'range',
					key: 'time11'
				},
				{
					title: '日期范围带时间',
					type: 'rangetime',
					key: 'time2'
				},
				{
					title: '日期',
					type: 'date',
					key: 'time3'
				},
				{
					title: '日期2',
					type: 'date',
					key: 'time4'
				},
				{
					title: '金额范围',
					type: 'rangenumber',
					key: 'count'
				},
				{
					title: '输入框',
					type: 'singleinput',
					key: 'input'
				}
			];
			this.defaultValue = {
				custom1: ['1', '2'],
				custom3: ['2', '3'],
				custom2: 1,
				time1: ['2021/02/01', '2021/02/03'],
				time2: ['2021/10/01 00:00:00', '2021/10/07 23:59:59'],
				time3: '2021/04/01',
				count: [10, 20],
				input: 'fjj'
			};
		}, 2000);
	},
	onReady() {
		this.getServerData();
	},
	methods: {
		getServerData() {
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
					series: [
						{
							name: '成交量A',
							linearColor: [
								[0, '#1890FF'],
								[0.25, '#00B5FF'],
								[0.5, '#00D1ED'],
								[0.75, '#00E6BB'],
								[1, '#90F489']
							],
							data: [15, 45, 15, 45, 15, 45]
						},
						{
							name: '成交量B',
							linearColor: [
								[0, '#91CB74'],
								[0.25, '#2BDCA8'],
								[0.5, '#2AE3A0'],
								[0.75, '#C4D06E'],
								[1, '#F2D375']
							],
							data: [55, 85, 55, 85, 55, 85]
						},
						{
							name: '成交量C',
							linearColor: [
								[0, '#FAC858'],
								[0.33, '#FFC371'],
								[0.66, '#FFC2B2'],
								[1, '#FA7D8D']
							],
							data: [95, 125, 95, 125, 95, 125]
						}
					]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			}, 500);
		},
		resultConditon(obj) {
			this.$refs.condition.visibleDrawer = false;
			this.hasChoose = obj.hasChoose;
			console.log(obj);
		},
		orderbyChange(obj) {
			this.$refs.condition.visibleDrawer = true;
		}
	}
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
	width: 100%;
	height: 300px;
}
</style>